<template>
  <div class="artist_name_popup" @click.self="clickColse()" @touchmove.self.prevent>
    <div class="main">
      <div class="header">请选择要查看的歌手</div>
      <div class="content" @touchmove.self>
        <ul>
          <li
            class="click_hover"
            v-for="(item,index) in artistsIdList"
            :key="index"
            @click.stop="artistClick(item.artist.id)"
          >
            <div class="img">
              <img v-lazy="item.artist.img1v1Url" alt />
            </div>
            <p class="name">{{item.artist.name}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["artistsIdList"],
  methods: {
    // 点击单个歌手名事件
    artistClick(id) {
      this.$emit("colseArtistNamePopup");
      this.$router.push({ name: "Artist", query: { id: id } });
    },
    // 点击遮罩层关闭
    clickColse() {
      this.$emit("colseArtistNamePopup");
    }
  }
};
</script>
<style lang="scss" scoped>
.artist_name_popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1001;
  background-color: rgba($color: #000000, $alpha: 0.5);
  .main {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 92%;
    border-radius: 0.2rem;
    padding: 0.2rem 0rem 0.3rem;
    .header {
      text-align: left;
      font-size: 0.36rem;
      line-height: 1.2rem;
      color: #333;
      font-weight: 900;
      padding: 0 0.3rem;
    }
    .content::-webkit-scrollbar {
      width: 0 !important;
      display: none; /*隐藏滚轮*/
    }
    .content {
      overflow-y: auto;
      max-height: 4rem;
      ul {
        li {
          overflow: hidden;
          padding: 0.1rem 0.3rem;
          .img {
            float: left;
            img {
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 0.1rem;
            }
          }
          p.name {
            margin-left: 0.3rem;
            float: left;
            font-size: 0.32rem;
            color: #666;
            line-height: 0.8rem;
          }
        }
      }
    }
  }
}
</style>